<template>
  <div class="vehicle-return">
    <div class="header">
      <router-link to="/main/wuye/vehicle/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>归还确认</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待确认" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="applyNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="vehicleNo" label="车牌号" width="120"></el-table-column>
            <el-table-column prop="driver" label="司机" width="120"></el-table-column>
            <el-table-column prop="returnTime" label="归还时间" width="180"></el-table-column>
            <el-table-column prop="condition" label="车辆状况" width="120">
              <template slot-scope="scope">
                <el-tag :type="scope.row.condition === '正常' ? 'success' : 'danger'">
                  {{ scope.row.condition }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="handleConfirm(scope.row)">确认</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已确认" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="applyNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="vehicleNo" label="车牌号" width="120"></el-table-column>
            <el-table-column prop="confirmTime" label="确认时间" width="180"></el-table-column>
            <el-table-column prop="usedMileage" label="行驶里程" width="120">
              <template slot-scope="scope">
                {{ scope.row.usedMileage }}公里
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="归还确认详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="return-detail" v-if="currentReturn">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="申请编号">{{ currentReturn.applyNo }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentReturn.applicant }}</el-descriptions-item>
          <el-descriptions-item label="车牌号">{{ currentReturn.vehicleNo }}</el-descriptions-item>
          <el-descriptions-item label="司机">{{ currentReturn.driver }}</el-descriptions-item>
          <el-descriptions-item label="用车类型">{{ currentReturn.useType }}</el-descriptions-item>
          <el-descriptions-item label="目的地">{{ currentReturn.destination }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h4>行驶记录</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="出发时间">{{ currentReturn.startTime }}</el-descriptions-item>
            <el-descriptions-item label="出发里程">{{ currentReturn.startMileage }}公里</el-descriptions-item>
            <el-descriptions-item label="归还时间">{{ currentReturn.returnTime }}</el-descriptions-item>
            <el-descriptions-item label="归还里程">{{ currentReturn.endMileage }}公里</el-descriptions-item>
            <el-descriptions-item label="行驶里程">{{ currentReturn.usedMileage }}公里</el-descriptions-item>
            <el-descriptions-item label="使用时长">{{ currentReturn.usedTime }}小时</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="detail-section">
          <h4>车辆状况</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="车辆状况">{{ currentReturn.condition }}</el-descriptions-item>
            <el-descriptions-item label="油量变化">{{ currentReturn.startFuel }}% → {{ currentReturn.endFuel }}%</el-descriptions-item>
            <el-descriptions-item label="异常说明" v-if="currentReturn.abnormalDesc">{{ currentReturn.abnormalDesc }}</el-descriptions-item>
            <el-descriptions-item label="备注说明">{{ currentReturn.remark }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>

    <!-- 确认对话框 -->
    <el-dialog title="归还确认" :visible.sync="confirmDialogVisible" width="50%">
      <el-form :model="confirmForm" label-width="100px">
        <el-form-item label="检查结果">
          <el-radio-group v-model="confirmForm.result">
            <el-radio label="正常">正常</el-radio>
            <el-radio label="异常">异常</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="异常说明" v-if="confirmForm.result === '异常'">
          <el-input type="textarea" v-model="confirmForm.abnormalDesc" rows="3"></el-input>
        </el-form-item>

        <el-form-item label="维护建议">
          <el-checkbox-group v-model="confirmForm.maintenance">
            <el-checkbox label="清洗">清洗</el-checkbox>
            <el-checkbox label="保养">保养</el-checkbox>
            <el-checkbox label="维修">维修</el-checkbox>
            <el-checkbox label="年检">年检</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="备注说明">
          <el-input type="textarea" v-model="confirmForm.remark" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="confirmDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          applyNo: 'YC202403150001',
          applicant: '张三',
          vehicleNo: '粤B12345',
          driver: '李四',
          useType: '公务用车',
          destination: '科技园区',
          startTime: '2024-03-15 09:00:00',
          returnTime: '2024-03-15 18:00:00',
          startMileage: 12500,
          endMileage: 12550,
          usedMileage: 50,
          usedTime: 9,
          startFuel: 85,
          endFuel: 70,
          condition: '正常',
          remark: '车辆使用正常'
        }
      ],
      completedList: [],
      detailDialogVisible: false,
      confirmDialogVisible: false,
      currentReturn: null,
      confirmForm: {
        result: '正常',
        abnormalDesc: '',
        maintenance: [],
        remark: ''
      }
    }
  },
  methods: {
    viewDetail(row) {
      this.currentReturn = row
      this.detailDialogVisible = true
    },
    handleConfirm(row) {
      this.currentReturn = row
      this.confirmForm = {
        result: '正常',
        abnormalDesc: '',
        maintenance: [],
        remark: ''
      }
      this.confirmDialogVisible = true
    },
    submitConfirm() {
      if (this.confirmForm.result === '异常' && !this.confirmForm.abnormalDesc) {
        this.$message.error('请填写异常说明')
        return
      }

      // TODO: 提交确认信息到后端
      const confirmInfo = {
        time: new Date().toLocaleString(),
        result: this.confirmForm.result,
        maintenance: this.confirmForm.maintenance,
        remark: this.confirmForm.remark
      }

      // 从待确认列表移动到已确认列表
      const index = this.pendingList.findIndex(item => item.applyNo === this.currentReturn.applyNo)
      if (index > -1) {
        const record = { ...this.currentReturn }
        record.confirmTime = confirmInfo.time
        record.confirmResult = confirmInfo.result
        record.maintenance = confirmInfo.maintenance
        record.confirmRemark = confirmInfo.remark
        this.pendingList.splice(index, 1)
        this.completedList.unshift(record)
      }

      this.$message.success('归还确认成功')
      this.confirmDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicle-return {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }
  }
}
</style> 